<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { userLoginStore } from '@/stores/login';
    import { typeEnum } from '@/enums'

    import Login from '@/components/LoginBox/Login/index.vue';
    import Register from '@/components/LoginBox/Register/index.vue';

    const loginStore = userLoginStore();
    // 显示登录框
    const visible = computed({
        get() {
            return loginStore.isShowLoginBox
        },
        set(value) {
            loginStore.isShowLoginBox = value
        },
    })
    // 显示下标
    const index = ref(typeEnum.LOGIN);
    // 标题
    let title = ref("登录到羅氏博客");

    // 切换下标
    const switchIndex = (i: typeEnum) => {
        index.value = i;
        if(i == typeEnum.LOGIN) {
            title.value = "登录到羅氏博客";
        } else if(i == typeEnum.REGISTER) {
            title.value = "注册到羅氏博客";
        }
    }
</script>

<template>
    <el-dialog v-model="visible" width="340" draggable :lock-scroll="false" :close-on-click-modal="false" :show-close="false">
        <template #header="{ close }">
            <div class="dialog-header">
                <div>{{ title }}</div>
                <el-icon class="el-icon-close" @click="close"><Close /></el-icon>
            </div>
        </template>
        <!-- 登录 -->
        <Login :visible="index == typeEnum.LOGIN" @switch="switchIndex" />
        <!-- 注册 -->
        <Register :visible="index == typeEnum.REGISTER" @switch="switchIndex" />
        <div class="separated">
            <el-divider content-position="center">第三方登录</el-divider>
        </div>
        <ul class="login-third clearfix" style="text-align: center">
            <li title="QQ登录" class="item">
                <svg-icon href="#icon-qq" width="30px" height="30px"></svg-icon>
            </li>
            <li title="微博登录" class="item">
                <svg-icon href="#icon-weibo" width="30px" height="30px"></svg-icon>
            </li>
        </ul>
    </el-dialog>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />